<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-31 14:25:27
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-11-01 15:14:09
 * @FilePath: \vue-project\src\components\RickText\RickTextEdit.vue
 * @Description: 富文本编辑器
 * 
-->
<template>
  <a-modal
    class="animate__animated animate__slideInDown"
    v-model:visible="visible"
    title="富文本编辑器"
  >
    <quill-editor
      class="ql-editor"
      :options="editorOption"
      v-model:content="content"
      content-type="html"
    >
    </quill-editor>
    <template #footer>
      <div class="flex justify-center">
        <a-button @click="close">关闭编辑器</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { QuillEditor, Quill } from '@vueup/vue-quill'
import ImageUploader from 'quill-image-uploader'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
Quill.register('modules/imageUploader', ImageUploader)
import { editorUpload } from '@/api/system.js'

const visible = ref(false)
const content = ref('')

//富文本编辑器相关配置
const editorOption = reactive({
  modules: {
    imageUploader: {
      upload: async (file) => {
        let res = await uploadFileAPI({ file }) // 此处为自己的上传接口
        return res.data.filePath // 此处替换为接口返回的文件路径
      }
    },
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
      ['blockquote', 'code-block'], // 引用  代码块
      [{ header: 1 }, { header: 2 }], // 1、2 级标题
      [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
      [{ script: 'sub' }, { script: 'super' }], // 上标/下标
      [{ indent: '-1' }, { indent: '+1' }], // 缩进
      [{ direction: 'rtl' }], // 文本方向
      [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
      [{ font: [] }], // 字体种类
      [{ align: [] }], // 对齐方式
      ['clean'], // 清除文本格式
      ['link', 'image', 'video'] // 链接、图片、视频
    ]
  }
})
const open = () => {
  visible.value = true
}
const close = () => {
  visible.value = false
}

defineExpose({
  open,
  close
})
</script>

<style lang="scss" scoped>
</style>